<template>
    <detail-dialog-panel v-bind="$attrs" v-on="$listeners">
        <el-tabs slot="left" tab-position="left" v-bind="$attrs" v-on="$listeners" class="detail-tab"
                 v-model="activeName">
            <el-tab-pane label="正文" name="first">
                <slot></slot>
            </el-tab-pane>
            <el-tab-pane label="附件" name="second" v-if="row.files">
                <attachments-list :files="row.files" @preview="showPreview"></attachments-list>
            </el-tab-pane>
            <el-tab-pane label="关联" v-if="row.type_id==3&&row.relation_id" name="sixth" :key="0">
                <div class="jiankuang">
                    <slot name="form">
                    </slot>
                    <div>
                        <iframe
                                :src="glUrl"
                                width="100%"
                                height="100%"
                                frameborder="0"
                                scrolling="auto"
                                id="glIframe"
                                name="glIframe"
                        ></iframe>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div slot="right">
              <active-button v-if="row.unread"></active-button>
        </div>
        <preview-file :files="row.files" v-if="row.files&&visible" :visible.sync="visible"></preview-file>
    </detail-dialog-panel>
</template>
<script>
    import ActiveButton from "../Case/ActiveButton";
    import DetailDialogPanel from "../Case/DetailDialogPanel";
    import AttachmentsList from "./AttachmentsList";
    import PreviewFile from "@/components/Common/PreviewFile";

    export default {
        name: "IssueViewDialog",
        components: {PreviewFile, AttachmentsList, DetailDialogPanel, ActiveButton},
        computed:{
            glUrl(){
                return process.env.VUE_APP_BASE_API + "/api/document/relation/" + this.row.relation_id+"/"
            },
        },
        props: {
            row: {
                type: Object,
                default:function () {
                    return {}
                }
            },
        },
        data() {
            return {
                activeName: "first",
                visible:false,
            };
        },
        created() {
        },
        methods: {
            clickHandle(type) {
                this.$emit("submitForm", type)
            },
            showPreview(){
                this.visible = true
            },
        }
    };
</script>
<style lang="scss" scoped>
    @import "~@/assets/styles/workflow.scss";
    ::v-deep .main{
        .left{
            flex: 1;
        }
    }
    .jiankuang{
        display: flex; height: 100%;
        div:last-child{
            flex: 1;
        }
    }
</style>
